<template>
  <div class="all_box">
    <div class="box_top">
      <div class="heads">
        <div>新乡市红旗区</div>
        <div>“防灾天目”应急指挥平台</div>
        <img src="http://3d.kuxia.top/assets/title.47b39eef.png" alt="" />
      </div>
      <div class="lefttext">
        <div>
          <img src="../assets/自然灾害.png" alt="" />
        </div>
        <div>
          <img src="../assets/安全生产.png" alt="" />
        </div>
      </div>
      <div class="righttext">
        <div>
          <img src="../assets/社会安全.png" alt="" />
        </div>
        <div>
          <img src="../assets/公共卫生.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 防雪 -->
    <div class="nav nav_list1">
      <div class="nav-text">
        <img src="http://3d.kuxia.top/assets/navRact1.44942be6.png" alt="" />
      </div>
      <img
        src="http://3d.kuxia.top/assets/nav3.e6718dbd.png"
        class="modelListImg"
      />
      <img
        src="http://3d.kuxia.top/assets/navsTxt3.2f730998.png"
        class="modelListTxt"
      />
      <img src="../assets/下.png" alt="" class="modelListJT" />
      <div class="line"></div>
    </div>
    <!-- 防火 -->
    <div class="nav nav_list2">
      <div class="nav-text">
        <img src="http://3d.kuxia.top/assets/navRact1.44942be6.png" alt="" />
      </div>
      <img
        src="	http://3d.kuxia.top/assets/nav2.5ac98db0.png"
        class="modelListImg"
      />
      <img
        src="http://3d.kuxia.top/assets/navsTxt2.114104ed.png"
        class="modelListTxt"
      />
      <img src="../assets/下.png" alt="" class="modelListJT" />
      <div class="line"></div>
    </div>
    <!-- 防汛 -->
    <div class="nav nav_list3">
      <div class="nav-text">
        <img src="http://3d.kuxia.top/assets/navRact1.44942be6.png" alt="" />
      </div>
      <img
        src="http://3d.kuxia.top/assets/nav1.6d49fee9.png"
        class="modelListImg"
      />
      <img
        src="http://3d.kuxia.top/assets/navsTxt1.7062826a.png"
        class="modelListTxt"
      />
      <img src="../assets/下.png" alt="" class="modelListJT" />
      <div class="line">
        <div></div>
      </div>
    </div>
    <!-- 防震 -->
    <div class="nav nav_list4">
      <div class="nav-text">
        <img src="http://3d.kuxia.top/assets/navRact1.44942be6.png" alt="" />
      </div>
      <img
        src="http://3d.kuxia.top/assets/nav4.e031e029.png"
        class="modelListImg"
      />
      <img
        src="http://3d.kuxia.top/assets/navsTxt4.473e7ae0.png"
        class="modelListTxt"
      />
      <img src="../assets/下.png" alt="" class="modelListJT" />
      <div class="line"></div>
    </div>
    <!-- 数据 -->
    <div class="nav nav_list5">
      <div class="nav-text">
        <img src="http://3d.kuxia.top/assets/navRact1.44942be6.png" alt="" />
      </div>
      <img
        src="	http://3d.kuxia.top/assets/nav5.aeeb06fe.png"
        class="modelListImg"
      />
      <img
        src="http://3d.kuxia.top/assets/navsTxt5.ea8ed1de.png"
        class="modelListTxt"
      />
      <img src="../assets/下.png" alt="" class="modelListJT" />
      <div class="line"></div>
    </div>
    <!-- 大logo -->
    <div class="loginlogo" @click="home">
      <img
        src="http://3d.kuxia.top/assets/logoBj.2d5def4d.png"
        alt=""
        class="loginImgLogo"
      />
      <img
        src="http://3d.kuxia.top/assets/logo.78933238.png"
        alt=""
        class="loginImgLogo"
      />
    </div>
  </div>
</template>

<script>
import router from '@/router';
export default {
  setup() {
    var home = ()=>{
      router.push({
        path:'/Home'
      })
    }
    return {
      home
    };
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
  box-sizing: border-box;
}
.all_box {
  width: 100vw;
  height: 100vh;
  background-image: url("http://3d.kuxia.top/assets/bj.7f9b108e.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box_top {
  width: 100%;
  height: 150px;
}
.heads {
  width: 100%;
  height: 50px;
  position: relative;
}
.heads > div:first-child {
  position: absolute;
  text-align: center;
  width: 100%;
  font-weight: 700;
  color: #00edfe;
  font-family: \5b8b\4f53;
  font-size: 35px;
}
.heads > div:nth-child(2) {
  position: absolute;
  text-align: center;
  width: 100%;
  font-weight: 700;
  color: #00edfe;
  font-family: \5b8b\4f53;
  font-size: 30px;
  margin-top: 45px;
}
.heads img {
  position: absolute;
  width: 100%;
}
.lefttext {
  top: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  width: 30%;
  display: flex;
  justify-content: space-around;
}
.lefttext > div {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  text-align: center;
  width: 13.75rem;
  background-image: url("../assets/text.png");
}
.lefttext img {
  margin-top: 6%;
}
.righttext img {
  margin-top: 6%;
}
.righttext > div {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  text-align: center;
  width: 13.75rem;
  background-image: url("../assets/text.png");
}
.righttext {
  top: 50px;
  height: 50px;
  position: absolute;
  right: 10px;
  width: 30%;
  display: flex;
  justify-content: space-around;
}
.lefttext > div:hover {
  background-image: url("../assets/textback.png");
}
.righttext > div:hover {
  background-image: url("../assets/textback.png");
}
.nav {
  position: absolute;
  transform-style: preserve-3d;
  background-size: 100%;
  background-image: url("http://3d.kuxia.top/assets/navBJ.c93018f2.png");
  width: 13rem;
  height: 14rem;
  text-align: center;
  cursor: pointer;
}
.nav-text {
  width: 6.25rem;
  height: 6.25rem;
  position: absolute;
  transform: rotateX(60deg) rotateY(0);
  left: 3.5rem;
  bottom: 1.5rem;
}
.nav-text img {
  position: absolute;
  top: 0;
  left: 0;
  width: 6.25rem;
  height: 6.25rem;
  transform-origin: center center;
}

.modelListImg {
  width: 7.5rem;
}
.modelListTxt {
  clear: both;
  width: 6.5rem;
  margin-top: -1rem;
}
.modelListJT {
  position: absolute;
  bottom: 0.5rem;
  left: calc(50% - 17px);
}
.nav_list1 {
  left: calc(10% - 112px);
  bottom: 15rem;
}
.nav_list2 {
  left: calc(30% - 112px);
  bottom: 20rem;
}
.nav_list3 {
  left: calc(50% - 112px);
  bottom: 25rem;
}
.nav_list4 {
  right: calc(30% - 112px);
  bottom: 20rem;
}
.nav_list5 {
  right: calc(10% - 112px);
  bottom: 15rem;
}
.nav_list1 .line {
  width: 500px;
  height: 60px;
  border-left: 1px solid rgba(7, 217, 255, 1);
  border-bottom: 1px solid rgba(7, 217, 255, 1);
  position: absolute;
  bottom: -3.8rem;
  left: 104px;
}
.nav_list2 .line {
  width: 200px;
  height: 60px;
  border-left: 1px solid rgba(7, 217, 255, 1);
  border-bottom: 1px solid rgba(7, 217, 255, 1);
  position: absolute;
  bottom: -3.8rem;
  left: 104px;
}
.nav_list3 .line> div{
  width: 1px;
  height: 70px;
  background-color: rgba(7, 217, 255, 1);
  margin: auto;
  margin-top: 35%;
}
.nav_list4 .line {
  width: 200px;
  height: 60px;
  border-right: 1px solid rgba(7, 217, 255, 1);
  border-bottom: 1px solid rgba(7, 217, 255, 1);
  position: absolute;
  bottom: -3.8rem;
  right: 104px;
}
.nav_list5 .line {
  width: 500px;
  height: 60px;
  border-right: 1px solid rgba(7, 217, 255, 1);
  border-bottom: 1px solid rgba(7, 217, 255, 1);
  position: absolute;
  bottom: -3.8rem;
  right: 104px;
}
.loginlogo {
  height: 202px;
  width: 202px;
  position: absolute;
  left: 50%;
  bottom: 7rem;
  transform: translate(-50%);
}
.loginImgLogo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>